import React from 'react';
import TweenOne from 'rc-tween-one';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

const figure1 = require('../../assets/figure1.png');
const figure2 = require('../../assets/figure2.png');
const figure3 = require('../../assets/figure3.png');

export default function Page6({handleModalVisible}) {
  return (
    <div className="page6-wrapper" >
      <h3 className="slogan">一个专属网约车车主的社区</h3>
      <h5 className="subslogan">我们希望网约车车主在获得收获的同时，能获得更多的收入。</h5>

      <OverPack>
      <div className="content">
        <figure>
          <TweenOne
            key="img1"
            animation={{ x: '-=30', opacity: 0, type: 'from' }}
            component={() => <img src={figure1} />}
          />
          <TweenOne
            key="figcaption1"
            animation={{ x: '+=30', opacity: 0, type: 'from' }}
            component={() => <figcaption>
              <div className="title">一直在路上的生活方式</div>
                <p className="subtitle">一直在路上是我们车主的职业，而我们努力让他
    成为一种体面而有趣的生活方式。</p>
                <div className="btn" onClick={handleModalVisible}><a>加入我们</a></div>
              </figcaption>
            }
          />
        </figure>
        <figure>
          <TweenOne
            key="figcaption2"
            delay={300}
            animation={{ y: '-=30', opacity: 0, type: 'from' }}
            component={() => <figcaption>
            <div className="title">一分稳定的收入</div>
                <p className="subtitle">一直在路上是我们车主的职业，而我们努力让他
    成为一种体面而有趣的生活方式的同时让我们的
    车主获得更多的收入。</p>
                <div className="btn" onClick={handleModalVisible}><a>加入我们</a></div>
              </figcaption>
            }
          />          
          <TweenOne
            key="img2"
            delay={300}
            animation={{ y: '+=30', opacity: 0, type: 'from' }}
            component={() => <img src={figure2} />}
          />
        </figure>
        <figure>
          <TweenOne
            key="img3"
            delay={600}
            animation={{ y: '-=30', opacity: 0, type: 'from' }}
            component={() => <img src={figure3} />}
          />
          <TweenOne
            key="figcaption3"
            delay={600}
            animation={{ y: '+=30', opacity: 0, type: 'from' }}
            component={() => <figcaption>
                <div className="title">更多收入的可能性</div>
                <p className="subtitle">社区作为网约车车主的主要聚集地，通过分享，
    定时举办活动，分享路上点滴。</p>
                <div className="btn" onClick={handleModalVisible}><a>加入我们</a></div>
              </figcaption>
            }
          />          
        </figure>
      </div>
      </OverPack>
    </div>
  );
}
